<template>
  <div class="data-table-container">
    <!-- 视图切换按钮 -->
    <div v-if="showViewToggle" class="view-toggle-container">
      <el-button-group class="view-toggle">
        <el-button 
          :type="viewMode === 'card' ? 'primary' : ''" 
          @click="$emit('view-change', 'card')"
          class="tech-button"
        >
          <i class="fa fa-th-large"></i> 卡片视图
        </el-button>
        <el-button 
          :type="viewMode === 'table' ? 'primary' : ''" 
          @click="$emit('view-change', 'table')"
          class="tech-button"
        >
          <i class="fa fa-table"></i> 表格视图
        </el-button>
      </el-button-group>
    </div>

    <!-- 卡片视图 -->
    <div v-if="viewMode === 'card'" class="card-view">
      <slot name="card-view"></slot>
    </div>

    <!-- 表格视图 -->
    <div v-if="viewMode === 'table'" class="table-view">
      <el-table
        :data="data"
        v-loading="loading"
        class="glass-dialog tech-table"
        stripe
        border
        style="width: 100%;"
        v-bind="tableProps"
      >
        <slot name="table-columns"></slot>
      </el-table>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && data.length === 0" class="empty-state">
      <i :class="emptyIcon"></i>
      <h3>{{ emptyTitle }}</h3>
      <p>{{ emptyDescription }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  data: any[]
  loading?: boolean
  viewMode?: 'card' | 'table'
  showViewToggle?: boolean
  emptyIcon?: string
  emptyTitle?: string
  emptyDescription?: string
  tableProps?: Record<string, any>
}

withDefaults(defineProps<Props>(), {
  loading: false,
  viewMode: 'card',
  showViewToggle: true,
  emptyIcon: 'fa fa-inbox',
  emptyTitle: '暂无数据',
  emptyDescription: '点击上方按钮添加数据',
  tableProps: () => ({})
})

defineEmits<{
  'view-change': [mode: 'card' | 'table']
}>()
</script>

<style lang="scss" scoped>
.data-table-container {
  .view-toggle-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
  }
  
  .view-toggle {
    .el-button {
      border-radius: 0 !important;
      
      &:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
      }
      
      &:last-child {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8892b0;
    
    i {
      font-size: 64px;
      margin-bottom: 20px;
      color: #4a5568;
    }
    
    h3 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #e6e6e6;
    }
    
    p {
      font-size: 14px;
      color: #8892b0;
    }
  }
}
</style>
